<d-splitter class="splitter-wrapper" orientation="vertical">
  <d-splitter-pane minSize="200px" (sizeChange)="updateScrollSize()">
    <d-data-table
      #dataTable
      [dataSource]="dataSource"
      [fixHeader]="true"
      [containFixHeaderHeight]="true"
      [virtualScroll]="true"
      tableHeight="100%"
      [tableOverflowType]="'overlay'"
      [scrollable]="true"
    >
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
          <tr dTableRow>
            <td dTableCell *ngFor="let colOption of dataTableOptions.columns">
              {{ colOption.fieldType === 'date' ? (rowItem[colOption.field] | i18nDate: 'short':false) : rowItem[colOption.field] }}
            </td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </d-splitter-pane>
  <d-splitter-pane minSize="20px">The table height is adaptive while adjust the pane height. </d-splitter-pane>
</d-splitter>
